<template>
  <transition name="loading" mode="out-in">
    <div v-show="visible" class="mask flex-column" :style="loadingStyle">
      <van-image :src="imgLoading" class="loading" />
      <p class="loading-text">拼命加载中</p>
    </div>
  </transition>
</template>
<script>
import imgLoading from "@/assets/image/loading.png";
export default {
  props: {
    // 是否全屏加载中
    fullscreen: {
      type: Boolean,
      default: true
    },
    // 是否处于加载中
    visible: Boolean
  },
  data() {
    return {
      imgLoading
    };
  },
  computed: {
    loadingStyle() {
      return this.fullscreen
        ? {
          position: "fixed",
          left: 0,
          top: 0,
          right: 0
        }
        : {};
    }
  }
};
</script>
<style scoped>
.loading-enter-active,
.loading-leave-active {
  transition: opacity 0.3s;
}
.loading-enter,
.loading-leave-to {
  opacity: 0;
}
.mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.loading {
  width: 1rem;
  height: 1rem;
  opacity: 1;
  animation: loading 0.2s linear infinite;
}
@keyframes loading {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(45deg);
  }
}
.loading-text {
  font-size: 0.5rem;
  color: #0581fd;
}
</style>
